<!-- 玩家信息管理 -->
<template>
  <div>
   <el-card>
      <div class="topInquire">
        <div>
          <!-- 渠道 -->
          <Channel @channel-event="handleSelectChannel"></Channel>
        </div>

        <div>
        <!-- 服务器 -->
        <Server @server-event="handleSelectServer"></Server>
        </div>

        <div>
        <!-- 日期 -->
        <DatePicker @dateChange="handleDateChange"></DatePicker>
        </div>

        <div>
          <span>玩家ID </span>
          <el-input v-model.trim="playerId" clearable style="width:200px;" size="small" placeholder="请输入" />
        </div>

        <div>
          <span>玩家名称 </span>
          <el-input v-model.trim="name" clearable  style="width:200px;" size="small" placeholder="请输入" />
        </div>
        
        <div>
          <span>玩家账号 </span>
          <el-input v-model.trim="account" clearable style="width:200px" size="small" placeholder="请输入" />
        </div>
        
        <el-button icon="el-icon-search" type="primary" size="small" @click="handleInquire">查询</el-button>

        <el-button icon="el-icon-upload2" type="success" size="small" @click="handleExport">导出Excel</el-button>
      </div>

      <div>
         <!-- 表格 -->
         <el-table
          ref="table"
          :data="playerInfoData"
          border
          :header-cell-style="{background:'#f5f7fa'}"
          :height="tableHeight"
          :cell-style="{'text-align':'center'}"
        >
          <el-table-column prop="id" label="玩家标识" min-width="120" />
          <el-table-column label="详情" min-width="120">
            <template #default="{row}">
              <el-button type="text" size="small" @click="handleDetails(row.playerId)">【查询】</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="channelInfo" label="渠道信息" min-width="120" />
          <el-table-column prop="serverInfo" label="服务器信息" min-width="120" />
          <el-table-column prop="openId" label="账号" min-width="120" />
          <el-table-column prop="playerId" label="玩家ID" min-width="200" />
          <el-table-column prop="nick" label="角色名" min-width="120" />
          <el-table-column prop="level" label="角色等级" min-width="120" />
          <el-table-column prop="vipLevel" label="VIP等级" min-width="120" />
          <el-table-column prop="recharge" label="充值金额（单位：元）" min-width="180" />
          <el-table-column prop="bornTime" label="创号时间" min-width="180">
            <template slot-scope="scope">{{ scope.row.bornTime|formatTime }}</template>
          </el-table-column>
          <el-table-column prop="lastLoginTime" label="最后登录时间" min-width="180">
            <template slot-scope="scope">{{ scope.row.lastLoginTime|formatTime }}</template>
          </el-table-column>
          <el-table-column prop="lastLogoutTime" label="最后离线时间" min-width="180">
            <template slot-scope="scope">{{ scope.row.lastLogoutTime|formatTime }}</template>
          </el-table-column>
          <el-table-column prop="forbidEndTime" label="封禁结束时间" min-width="180">
            <template slot-scope="scope" >{{ scope.row.forbidEndTime|formatTime }}</template>
          </el-table-column>
          <el-table-column prop="forbidRankTime" label="封榜结束时间" min-width="180">
            <template slot-scope="scope">{{ scope.row.forbidRankTime|formatTime }}</template>
          </el-table-column>
          <el-table-column prop="online" label="是否在线" min-width="120">
            <template slot-scope="scope">
              <el-tag :type="scope.row.online? 'success' : 'info'">
                {{ scope.row.online?'在线':'离线' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="loginIp" label="IP" min-width="120" />
          <el-table-column prop="deviceModel" label="手机型号" min-width="120" />
          <el-table-column fixed="right" label="操作" width="240">
            <template #default="{row}">
              <el-button type="danger" plain size="small" @click="handleBanned(row)">封号</el-button>
              <el-button type="warning" plain size="small" @click="handleKickout(row)">下线</el-button>
              <el-button type="info" plain size="small" @click="handleBlockList(row)">封榜</el-button>
            </template>
          </el-table-column>
         </el-table>

         <!-- 分页 -->
         <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :total="total"
          :current-page="currentPage"
          :page-size="pageSize"
          @current-change="changePage"
         />
      </div>
   </el-card>

    <!-- 详情-弹窗 -->
    <el-dialog
      title="玩家详情页"
      :visible.sync="dialogVisible"
      width="70%"
      :modal-append-to-body="false"
      @close="closeDialog"
    >
          <div class="role-content">
            <el-table
              border
              :data="detailsData"
              :header-cell-style="{background:'#f5f7fa'}"
              :cell-style="{'text-align':'center'}"
              height="200"
            >
              <el-table-column prop="id" label="玩家ID" min-width="200" />
              <el-table-column prop="nick" label="角色名" min-width="120" />
              <el-table-column prop="level" label="角色等级" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleLevel(row.id)">{{ row.level }}</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="vipLevel" label="VIP等级" min-width="120" />
              <el-table-column prop="recharge" label="充值金额" min-width="120" />
              <el-table-column prop="bornTime" label="创号时间" min-width="180" >
               <template slot-scope="scope">{{ scope.row.bornTime|formatTime }}</template>
              </el-table-column>
              <el-table-column prop="mission" label="通关关卡" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleMission(row.id)">{{ row.mission }}</el-link>
                </template>       
              </el-table-column>
              <el-table-column prop="gold" label="金币" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleGold(row.id)">{{ row.gold }}</el-link>
                </template>    
              </el-table-column>
              <el-table-column prop="diamond" label="钻石" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleDiamond(row.id)">{{ row.diamond }}</el-link>
                </template>   
              </el-table-column>
              <el-table-column prop="heroNum" label="英雄数量" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleHeroNum(row.id)">{{ row.heroNum }}</el-link>
                </template>   
              </el-table-column>
              <el-table-column prop="muscle" label="体力" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleMuscle(row.id)">{{ row.muscle }}</el-link>
                </template>   
              </el-table-column>
              <el-table-column prop="point" label="积分" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handlePoint(row.id)">{{ row.point }}</el-link>
                </template>   
              </el-table-column>
              <el-table-column prop="gooseFeather" label="鹅毛" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleGooseFeather(row.id)">{{ row.gooseFeather }}</el-link>
                </template>   
              </el-table-column>
              <el-table-column prop="weaponSummon" label="武器召唤次数" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleWeaponSummon(row.id)">{{ row.weaponSummon }}</el-link>
                </template>   
              </el-table-column>
              <el-table-column prop="treasureSummon" label="宝藏召唤次数" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleTreasureSummon(row.id)">{{ row.treasureSummon }}</el-link>
                </template>   
              </el-table-column>
              <el-table-column prop="weaponNum" label="武器数量" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleWeaponNum(row.id)">{{ row.weaponNum }}</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="treasureNum" label="宝藏数量" min-width="120">
                <template #default="{row}">
                  <el-link type="primary" @click="handleTreasureNum(row.id)">{{ row.treasureNum }}</el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 封号、封榜-弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="bannedDialog"
      width="35%"
      :modal-append-to-body="false"
      center
    >
      <el-form :model="formData" label-width="100px">
        <el-form-item label="玩家ID">
          <el-input v-model.trim="formData.playerId" disabled />
        </el-form-item>
        <el-form-item label="玩家昵称">
          <el-input v-model.trim="formData.nick" disabled />
        </el-form-item>
        <el-form-item label="玩家账号">
          <el-input v-model.trim="formData.openId" disabled />
        </el-form-item>
        <el-form-item label="封禁结束时间">
          <el-date-picker
            v-model="banDate"
            type="datetime"
            placeholder="选择日期时间"
            value-format="timestamp"
            style="width: 100%;"
          />
        </el-form-item>
        <div style="color:red;margin-left: 100px;">注意：选择当前时间即为解封</div>
      </el-form>
      <span slot="footer">
        <el-button type="primary" @click="handleConfirm">确 认</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </span>
    </el-dialog>

   <div>
     <!-- 等级弹窗 -->
     <LevelDialog :visible.sync="levelChangeDialog" :levelData="levelData" :total="childTotal" @child-inquire="handleLevel(playerId,$event)" />
     <!-- 关卡弹窗 -->
     <MissionDialog :visible.sync="missionChangeDialog" :missionData="missionData" :total="childTotal" @child-inquire="handleMission(playerId,$event)" />
     <!-- 金币弹窗 -->
     <GoldDialog :visible.sync="goldChangeDialog" :goldData="goldData" :total="childTotal" @child-inquire="handleGold(playerId,$event)" />
     <!-- 钻石弹窗 -->
     <DiamondDialog :visible.sync="diamondChangeDialog" :diamondData="diamondData" :total="childTotal" @child-inquire="handleDiamond(playerId,$event)" />
     <!-- 体力弹窗 -->
     <MuscleDialog :visible.sync="muscleChangeDialog" :muscleData="muscleData" :total="childTotal" @child-inquire="handleMuscle(playerId,$event)" />
     <!-- 积分弹窗 -->
     <PointDialog :visible.sync="pointChangeDialog" :pointData="pointData" :total="childTotal" @child-inquire="handlePoint(playerId,$event)" />
     <!-- 鹅毛弹窗 -->
     <FeatherDialog :visible.sync="featherChangeDialog" :featherData="featherData" :total="childTotal" @child-inquire="handleGooseFeather(playerId,$event)" />
     <!-- 英雄数量弹窗 -->
     <HeroNumDialog :visible.sync="heroNumChangeDialog" :heroNumData="heroNumData" :total="childTotal" :playerId="playerId" @child-inquire="handleHeroNum(playerId,$event)" />
     <!-- 宝藏召唤数量弹窗 -->
     <TreasureSummonDialog :visible.sync="treasureSummonChangeDialog" :treasureSummonData="treasureSummonData" :total="childTotal" @child-inquire="handleTreasureSummon(playerId,$event)" />
     <!-- 宝藏数量弹窗 -->
     <TreasureNumDialog :visible.sync="treasureNumChangeDialog" :treasureNumData="treasureNumData" :total="childTotal" @child-inquire="handleTreasureNum(playerId,$event)" />
     <!-- 武器召唤弹窗 -->
     <WeaponSummoDialog :visible.sync="weaponSummonChangeDialog" :weaponSummonData="weaponSummonData" :total="childTotal" @child-inquire="handleWeaponSummon(playerId,$event)" />
     <!-- 武器弹窗 -->
     <WeaponNumDialog :visible.sync="weaponNumChangeDialog" :weaponNumData="weaponNumData" :total="childTotal" @child-inquire="handleWeaponNum(playerId,$event)" />
   </div>

  </div>
</template>

<script>
import Channel from '@/components/selectChannel/index.vue'
import Server from '@/components/selectServer/index.vue'
import DatePicker from '@/components/datePicker/index.vue'
import { playerInfo,playerDetail,blockPlayer,KickoutPlayer,
  playerDataChange,blockListPlayer } from '@/api/playerManage'

import LevelDialog from './components/LevelDialog'
import MissionDialog from './components/MissionDialog'
import GoldDialog from './components/GoldDialog'
import DiamondDialog from './components/DiamondDialog'
import MuscleDialog from './components/MuscleDialog'
import PointDialog from './components/PointDialog'
import FeatherDialog from './components/FeatherDialog'
import HeroNumDialog from './components/HeroNumDialog'
import TreasureSummonDialog from './components/TreasureSummonDialog'
import TreasureNumDialog from './components/TreasureNumDialog'
import WeaponSummoDialog from './components/WeaponSummoDialog'
import WeaponNumDialog from './components/WeaponNumDialog'

import { export_json_to_excel } from '@/widget/Export2Excel'

export default {
  components: {
    Channel,Server,DatePicker,
    LevelDialog,MissionDialog,GoldDialog,DiamondDialog,MuscleDialog,PointDialog,
    FeatherDialog,HeroNumDialog,TreasureSummonDialog,TreasureNumDialog,
    WeaponSummoDialog,WeaponNumDialog
  },
  data() {
    return {
      playerId:0,
      name: '', // 玩家名称
      account:'',
      total: 0,
      currentPage: 1, // 当前页
      pageSize: 200, // 每页显示条数
      tableHeight: 0, // 表格高度
      dialogVisible: false,
      bannedDialog: false,
      banDate:'',
      playerInfoData: [],
      detailsData:[],
      formData: {},
      selectChannel:[],
      selectServer:[],
      date:[],
      title:'',
      
      levelChangeDialog: false,
      missionChangeDialog: false,
      goldChangeDialog: false,
      diamondChangeDialog: false,
      muscleChangeDialog: false,
      pointChangeDialog: false,
      featherChangeDialog: false,
      heroNumChangeDialog: false,
      treasureSummonChangeDialog: false,
      treasureNumChangeDialog: false,
      weaponSummonChangeDialog: false,
      weaponNumChangeDialog: false,

      childTotal:0,
      levelData:[],
      missionData:[],
      goldData:[],
      diamondData:[],
      muscleData:[],
      pointData:[],
      featherData:[],
      heroNumData:[],
      treasureSummonData:[],
      treasureNumData:[],
      weaponSummonData:[],
      weaponNumData:[]
    }
  },

  created() {
    this.getPlayerInfo()
  },

  mounted() {
    this.$nextTick(() => {
      this.getTableHeight()
    })
    window.addEventListener('resize', this.$debounce(this.getTableHeight, 100))
  },

  beforeDestroy() {
    window.removeEventListener('resize', this.getTableHeight)
  },

  methods: {
    // 获取数据
    async getPlayerInfo() {
      const res = await playerInfo({
        page: this.currentPage,
        limit: this.pageSize,
      })
      this.total = res.data.data.count
      this.playerInfoData = res.data.data.data
    },

    // 选择日期
    handleDateChange(dateRange){
      this.date = dateRange
    },

    // 选中的渠道
    handleSelectChannel(value){
      this.selectChannel = value
    },

    // 选中的服务器
    handleSelectServer(value){
      this.selectServer = value
    },

    // 查询
    async handleInquire() {
      try {
        const query = { page: this.currentPage, limit: this.pageSize }

        if (this.selectChannel.length !== 0) {
          query.channels = this.selectChannel
        }
        if (this.selectServer.length !== 0) {
          query.serverUids = this.selectServer
        }
        if (this.date && this.date.length === 2) {
          // 时间戳毫秒转化为秒
          query.startTime = this.$moment(this.date[0]).unix()
          query.endTime = this.$moment(this.date[1]).unix()
        }
        if (this.playerId) {
          query.playerId = this.playerId
        }
        if (this.name) {
          query.name = this.name
        }
        if (this.account) {
          query.openId = this.account
        }
        const res = await playerInfo(query)
        this.total = res.data.data.count
        this.playerInfoData = res.data.data.data

        // 给出提示
        if (res.data.data.count === 0) {
          if (query.playerId) {
            this.message.warning('此玩家ID不存在')
          } else if (query.name) {
            this.message.warning('此玩家名称不存在')
          } else if (query.openId) {
            this.$message.warning('此玩家账号不存在')
          }
        }
      } catch (error) {
        console.error(error)
        this.$message.error('发生错误，请稍后重试')
      }
    },

    // 切换页面
    changePage(page) {
      this.currentPage = page
      this.getPlayerInfo()
    },


    // 查看玩家详情
    async handleDetails(id) {
      const resInfo = await playerDetail({ playerId: id })
      this.detailsData = resInfo.data.data.data
      this.dialogVisible = true
    },

    // 封号
    async handleBanned(row){
      this.title='封禁玩家'
      this.formData.playerId = row.playerId
      this.formData.openId = row.openId
      this.formData.nick = row.nick
      this.bannedDialog = true
    },

    // 封榜
    async handleBlockList(row){
      this.title='封榜玩家'
      this.formData.playerId = row.playerId
      this.formData.openId = row.openId
      this.formData.nick = row.nick
      this.bannedDialog = true
    },

    // 封号、封榜-确认
    async handleConfirm() {
      if (this.title === '封榜玩家') {
        // 封榜
        await blockListPlayer({
              playerId: this.formData.playerId,
              forbidEndTime: this.banDate })
      } else {
        // 封号
        await blockPlayer({
               playerId: this.formData.playerId,
               forbidEndTime: this.banDate })
      }
      this.closeDialog()
    },

    // 下线
    handleKickout(row){
      this.$confirm(`确定下线昵称为 ${row.nick} 的玩家吗？`, '下线提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning',
        lockScroll: false
      }).then(async() => {
        const res = await KickoutPlayer({ playerId: row.playerId })
        if (res.data.code === 0) {
          this.$message.success('成功下线该玩家')
        } else {
          this.$message.error('下线该玩家失败')
        }
      })
    },

    // 等级变化详情
    async handleLevel(id, childParams = 1) {
      this.playerId = id
      let params = { playerId: this.playerId, module: 'level' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.levelData = res.data.data.data
      this.levelChangeDialog = true
    },

    // 关卡变化详情
    async handleMission(id,childParams=1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'mission' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.missionData = res.data.data.data
      this.missionChangeDialog = true
    },

    // 金币变化详情
    async handleGold(id,childParams=1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'gold' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.goldData = res.data.data.data
      this.goldChangeDialog = true
    },

    // 钻石变化详情
    async handleDiamond(id, childParams = 1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'diamond' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.diamondData = res.data.data.data
      this.diamondChangeDialog = true
    },

    // 体力变化详情
    async handleMuscle(id, childParams = 1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'muscle' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.muscleData = res.data.data.data
      this.muscleChangeDialog = true
    },

    // 积分变化详情
    async handlePoint(id, childParams = 1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'point' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.pointData = res.data.data.data
      this.pointChangeDialog = true
    },

    // 羽毛变化详情
    async handleGooseFeather(id, childParams = 1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'feather' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.featherData = res.data.data.data
      this.featherChangeDialog = true
    },

    // 英雄数量变化详情
    async handleHeroNum(id, childParams = 1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'heroNum' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.heroNumData = res.data.data.data
      this.heroNumChangeDialog = true
    },

    // 宝藏召唤数量变化详情
    async handleTreasureSummon(id, childParams = 1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'treasureSummon' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.treasureSummonData = res.data.data.data
      this.treasureSummonChangeDialog = true
    },

    // 宝藏数量变化详情
    async handleTreasureNum(id, childParams = 1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'treasureNum' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.treasureNumData = res.data.data.data
      this.treasureNumChangeDialog = true
    },

    // 武器召唤数量变化详情
    async handleWeaponSummon(id, childParams = 1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'weaponSummon' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.weaponSummonData = res.data.data.data
      this.weaponSummonChangeDialog = true
    },

    // 武器数量变化详情
    async handleWeaponNum(id, childParams = 1){
      this.playerId = id
      let params = { playerId: this.playerId, module: 'weaponNum' }
      if (childParams != 1) {
        params = { ...childParams, ...params }
      }
      const res = await playerDataChange(params)
      this.childTotal = res.data.data.count
      this.weaponNumData = res.data.data.data
      this.weaponNumChangeDialog = true
    },

    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false
      this.bannedDialog = false
      this.formData = {}
      this.banDate=''
    },

    // 导出
    async handleExport() {
      try {
        const res = await playerInfo({
          limit: this.total
        })

        // 处理导出数据
        const exportData = res.data.data.data.map(i => {
          // 创号时间
          const bornTime = this.$options.filters.formatTime(i.bornTime)
          // 最后登录时间
          const lastLoginTime = this.$options.filters.formatTime(i.lastLoginTime)
          // 最后离线时间
          const lastLogoutTime = this.$options.filters.formatTime(i.lastLogoutTime)
          // 是否在线
          const online = i.online ? '在线' : '离线'
          // 封禁结束时间
          let forbidEndTime = i.forbidEndTime
          if (forbidEndTime!=0) {
            this.forbidEndTime = this.$options.filters.formatTime(i.forbidEndTime)
          } 

          return { ...i,lastLoginTime,lastLogoutTime,bornTime,online,forbidEndTime }
        })

        const newData = exportData.map(item => {
          const arr = []
          const obj = {
            id: '玩家标识',
            channelInfo:'渠道信息',
            serverInfo: '服务器信息',
            openId: '账号',
            playerId: '玩家ID',
            nick: '角色名',
            level: '角色等级',
            vipLevel: 'VIP等级',
            recharge: '充值金额',
            bornTime: '创号时间',
            lastLoginTime: '最后登录时间',
            lastLogoutTime: '最后离线时间',
            forbidEndTime:'封禁结束时间',
            online: '是否在线',
            loginIp: 'IP',
            deviceModel: '手机型号'
          }
          for (const key in obj) {
            arr.push(item[key])
          }
          return arr
        })

        const tHeader = [
          '玩家标识','渠道信息', '服务器', '账号', '玩家ID', '角色名', '角色等级', 'VIP等级', '充值金额（单位：元）',
           '创号时间','最后登录时间', '最后离线时间','封禁结束时间','是否在线', 'IP', '手机型号']

        export_json_to_excel({
          header: tHeader,
          data: newData,
          filename: `玩家信息管理表${this.$moment(new Date()).format('YYYYMMDDHHmm')}`,
          autoWidth: true,
          bookType: 'xlsx'
        })
      } catch (error) {
        this.$message.error(error)
      }
    },

    // 表格自适应高度
    getTableHeight() {
      if (this.$refs.table && this.$refs.table.$el) {
        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 175
      } else {
        this.tableHeight = 300
      }
    }

  }

}
</script>

<style lang="scss" scoped>
.el-table{
  margin: 0;
}

.topInquire{
  font-weight: bold;
  font-size: 14px;
  color: #6a7488;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.el-pagination{
 margin-top: 20px;
}

.role-content{
  max-height: 60vh;
 overflow-y: auto;
 overflow-x: hidden;

 &::-webkit-scrollbar {
  width: 6px;
  background-color: transparent;
 }

 &::-webkit-scrollbar-thumb {
  background-color: #c4c1c1;
  border-radius: 4px;
 }

 &::-webkit-scrollbar-thumb:hover {
  background-color: #999;
 }
}

::v-deep .role-content .el-input__inner{
  border-radius: 0px 4px 4px 0px;
}


::v-deep .el-table th {
  text-align: center;
}

::v-deep .el-link.is-underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  bottom: 0;
  border-bottom: 1px solid #1890ff;
}
</style>
